<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .my {
            width: 0;
            height: 0;
            border-left: 25px solid transparent;
            border-right: 25px solid transparent;
            border-bottom: 25px solid #000;
            position: fixed;
            bottom: 0;
            /* transform: rotate(270deg); */
        }
    </style>
</head>

<body>
    <div class="my"></div>
    <script>
        // 拿到三角形
        const A = document.querySelector('.my');
        let t;
        console.log(A);
        // 做一个键盘事件
        document.onkeydown = function (e) {
            clearInterval(t);
            let x = A.offsetLeft;
            let y = A.offsetTop;
            console.log(x);
            // console.log(e.keyCode);  
            // 上38 下40 左37 右39
            // 右
            t = setInterval(function () {
                // 右
                if (e.keyCode === 39) {
                    x += 10;
                    A.style.left = x + 'px';
                    A.style.transform = 'rotate(90deg)';
                }
                // 左
                if (e.keyCode === 37) {
                    x -= 10;
                    A.style.left = x + 'px';
                    A.style.transform = 'rotate(270deg)';
                }
                // 上
                if (e.keyCode === 38) {
                    y -= 10;
                    A.style.top = y + 'px';
                    // console.log(y);
                    A.style.transform = 'rotate(0deg)';
                }
                // 下
                if (e.keyCode === 40) {
                    y += 10;
                    A.style.top = y + 'px';
                    // console.log(y);
                    A.style.transform = 'rotate(180deg)';
                }
            }, 50)
        }
    </script>
</body>

</html>